<template>
  <div class="base-message">
    <nav>
      <div @click="backFunc" class="back">&lt;</div>
    </nav>
    <main>
      <div class="main-top">
        <div class="list">
          <div class="img">
            <img :src="imgUrl" alt="head" />
          </div>
          <div class="desc">
            <span class="nickname">昵称：{{ basicNic }}</span>
            <span
              >微信号：<span class="phone">{{ BasicObj.phone }}</span></span
            >
            <span>地区：广东 广州</span>
          </div>
        </div>
        <div class="list between">
          <span>设置备注和标签</span>
          <span>&gt;</span>
        </div>
      </div>
      <div class="main-center">
        <div class="list">
          <span>个性标签</span>
        </div>
        <div class="list">
          <span>来源</span>
          <span class="list-item">来自手机号搜索</span>
        </div>
      </div>
      <div class="main-bottom" @click="goToApplyView()">
        <span>添加到通讯录</span>
      </div>
    </main>
  </div>
</template>

<script>
import { mapState } from "vuex";

export default {
  data() {
    return {
      basicNic: "",
      imgUrl: "",
    };
  },
  computed: {
    ...mapState({
      BasicObj: (state) => state.friends.friendsBasicObj,
    }),
  },
  created() {
    console.log(this.BasicObj);
    this.imgUrl =
      this.BasicObj.avatarurl || require("@/assets/image/addressImg/head.webp");
    this.basicNic = this.BasicObj.nickname || `用户${this.BasicObj.phone}`;
  },

  methods: {
    goToApplyView() {
      this.$router.push({
        name: "applyView",
      });
    },
    backFunc() {
      this.$router.go(-1);
    },
  },
};
</script>


<style lang="scss" scoped>
.base-message {
  height: 100vh;
  width: 100%;
  overflow: hidden;
  background-color: rgb(17, 17, 17);
  color: white;

  nav {
    width: 100vw;
    height: 45px;
    background-color: rgb(17, 17, 17);
    line-height: 45px;
    color: white;
    text-align: left;
    font-size: 14px;
    padding-left: 15px;
  }

  .main-top {
    margin-bottom: 15px;

    .img {
      width: 60px;
      height: 60px;
      border-radius: 5px;
      margin-right: 20px;

      img {
        width: 100%;
        height: 100%;
        display: block;
        border-radius: 5px;
      }
    }

    .desc {
      display: flex;
      flex-direction: column;
      line-height: 25px;
      color: gray;
      margin-bottom: 15px;

      .nickname {
        font-size: 16px;
        font-weight: bold;
        color: white;
      }
    }
  }

  .main-center {
    margin-bottom: 15px;
  }

  .phone {
    color: rgb(160, 196, 247);
  }

  .main-bottom {
    text-align: center;
    line-height: 40px;
    background-color: rgb(24, 24, 24);
    color: rgb(160, 196, 247);
  }

  .list {
    line-height: 25px;
    display: flex;
    flex-direction: row;
    padding: 15px;
    border-bottom: 1px solid rgba(204, 203, 203, 0.1);
    background-color: rgb(24, 24, 24);

    .list-item {
      color: gray;
      margin-left: 50px;
    }

    &.between {
      justify-content: space-between;
    }
  }
}
</style>